<template>
  <div>
    <div class="controlPlan">
      <!-- 标题 -->
      <div class="controlPlan-title">控制计划</div>


      <!-- 条件筛选 -->
      <div class="controlPlan-condition">
        <div class="controlPlan-condition-form">
          <normal-form-plus
            :formModel="formModel"
            :config="config"
            :plus="plus"/>
        </div>
        <div class="controlPlan-condition-btn">
          <el-button @click="initTableData()">查询</el-button>
          <el-button @click="reset()">重置</el-button>
          <el-button @click="add">新增</el-button>
        </div>
      </div>


      <!-- 表格-核算报告 -->
      <div class="controlPlan-report">
        <normal-table
          :tableData="tableData"
          :paginationConfig="paginationConfig"
          :tableLabel="tableLabel"
          :operationConfig="operationConfig"
          :operationList="operationList"
          @event="handleEvent"
          @changePage="changePage"></normal-table>
      </div>

      <!-- 新增控制计划-表单 -->
      <el-dialog
        title="新增控制计划"
        :visible.sync="showWindow"
        width="40%"
        class="form">
        <!-- form表单 -->
        <div class="formData">
          <normal-form
            :formModel="addFormModel"
            :config="addConfig"
            :plus="plus"/>
        </div>
        <span slot="footer" class="form-footer">
          <el-button type="primary" @click="makeSure()" class="confirm">确 定</el-button>
          <el-button @click="showWindow = false">取 消</el-button>
          </span>
      </el-dialog>

      <!-- 修改控制计划 -->
      <el-dialog
        title="修改控制计划"
        :visible.sync="modifyWindow"
        width="40%"
        class="form">
        <!-- form表单 -->
        <div class="formData">
          <normal-form
            :formModel="moidfyFormModel"
            :config="addConfig"
            :plus="plus"/>
        </div>
        <span slot="footer" class="form-footer">
          <el-button type="primary" @click="modify()" class="confirm">确 定</el-button>
          <el-button @click="modifyWindow = false">取 消</el-button>
          </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import NormalTable from '@/components/NormalTable'
import NormalFormPlus from '@/components/NormalFormPlus'
import NormalForm from '@/components/NormalForm'

export default {
  name: 'controlPlan',
  components: {
    NormalTable,
    NormalFormPlus,
    NormalForm
  },
  mounted() {
    this.initTableData()
  },
  data() {
    return {
      addFormModel: {
        "dataQuality": "", // 数据质量管理规定
        "remark": "", // 备注
        "revisionContents": "", // 制定（修订）内容
        "revisionTime": "", // 制定（修订）时间
        "version": "" // 版本号
      },
      moidfyFormModel: {
        "dataQuality": "", // 数据质量管理规定
        "remark": "", // 备注
        "revisionContents": "", // 制定（修订）内容
        "revisionTime": "", // 制定（修订）时间
        "version": "" // 版本号
      },
      addConfig: [
        {
          id: '1',
          edit: true,
          type: 'input',
          span: 8,
          model: 'version',
          name: '版本号',
          width: 40,
          props: {
            placeholder: "版本号",
            width: 200,

          }
        },
        {
          id: '2',
          edit: true,
          type: 'time',
          span: 12,
          model: 'revisionTime',
          name: '制定时间',
          width: 150,
          props: {
            placeholder: "制定时间",
            width: 200
          }
        },
        {
          id: '3',
          edit: true,
          type: 'text',
          span: 12,
          model: 'revisionContents',
          name: '制定内容',
          width: 150,
          props: {
            placeholder: "制定内容",
            width: 200,

          }
        },
        {
          id: '4',
          edit: true,
          type: 'text',
          span: 12,
          model: 'remark',
          name: '备注',
          width: 150,
          props: {
            placeholder: "备注",
            width: 200,

          }
        },
      ],
      showWindow: false,
      modifyWindow: false,
      formModel: {
        version: ''
      },
      config: [
        {
          id: 1,
          items: [
            {
              id: '1',
              edit: true,
              type: 'input',
              span: 6,
              model: 'version',
              name: '',
              props: {
                placeholder: "版本号",

              }
            }
          ]
        },
      ],
      plus: {},
      tableData: [],
      paginationConfig: {
        total: 100,
        page: 1,
        pageSize: 10,
        show: true
      },
      operationList: [
        {
          name: '编辑',
          order: 1,
          buttonClass: 'primary',
          plus: {}
        },
        {
          name: '详情',
          order: 2,
          buttonClass: 'primary',
          plus: {}
        },
        {
          name: '删除',
          order: 3,
          buttonClass: 'danger',
          plus: {}
        }
      ],
      operationConfig: {select: false},
      tableLabel: [
        {
          prop: "order",
          label: "序号",
          width: 70
        },
        {
          prop: "version",
          label: "版本号",
          width: 70
        },
        {
          prop: "revisionContents",
          label: "制定（修订）内容",
          width: 170
        },
        {
          prop: "@revisionTime",
          label: "制定（修订）时间",
          width: 150
        },
        {
          prop: "remark",
          label: "备注",
          width: 200
        },
        {
          prop: "updater",
          label: "更新人"
        },
        {
          prop: "@updateTime",
          label: "更新时间",
          width: 200
        },
      ],

    }
  },
  methods: {
    reset() {
      this.formModel.version = ''
      this.initTableData()
    },
    // 修改控制计划
    modify() {
      this.modifyWindow = false
      this.$API.enterprise.updateControlPlan(this.moidfyFormModel).then(response => {
        this.initTableData()
      })
    },
    // 添加控制计划
    makeSure() {
      this.showWindow = false
      this.$message({
        message: '添加成功',
        type: 'success'
      });
      // this.tableData = this.$MOCK.enterprise.controlPlanList2.data.list
      this.$API.enterprise.createControlPlan(this.addFormModel).then(response => {
        this.initTableData()
      })
    },
    // 初始化表格
    initTableData() {
      if (this.$MOCK.mock) {
        this.tableData = this.$MOCK.enterprise.controlPlanList.data.list
        this.paginationConfig.total = this.$MOCK.enterprise.controlPlanList.data.total
        return
      }
      this.$API.enterprise.getControlPlanList({
        pageNo: this.paginationConfig.page,
        pageSize: this.paginationConfig.pageSize,
        version: this.formModel.version == '' ? null : this.formModel.version
      }).then(response => {
        this.tableData = response.data.list
        this.paginationConfig.total = response.data.total
      })
    },
    add() {
      this.addFormModel = {
        "dataQuality": "", // 数据质量管理规定
        "remark": "", // 备注
        "revisionContents": "", // 制定（修订）内容
        "revisionTime": "", // 制定（修订）时间
        "version": "" // 版本号
      }
      this.showWindow = true
    },
    getdateNoTime(date) {
      var now = new Date(parseInt(date)),
        y = now.getFullYear(),
        m = now.getMonth() + 1,
        d = now.getDate();
      return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d)
    },
    // 处理表格点击事件
    handleEvent(order, row) {
      if (order === 1) {
        this.moidfyFormModel = {
          "id": row.id,
          "dataQuality": row.dataQuality,
          "remark": row.remark, // 备注
          "revisionContents": row.revisionContents, // 制定（修订）内容
          "revisionTime": this.getdateNoTime(row.revisionTime), // 制定（修订）时间
          "version": row.version // 版本号
        }
        this.modifyWindow = true
      } else if (order == 2) {
        this.$router.push({path: '/enterpriseCarbonAccounting/dataQualityManage/newControlPlan', query: {id: row.id}})
      } else if (order == 3) {
        this.$API.enterprise.deleteControlPlan({id: row.id}).then(response => {
          this.initTableData()
        })
      }
    },
    // 分页点击事件
    changePage() {
      this.initTableData()
    }
  }
}
</script>

<style lang="less" scoped>
.controlPlan {
  //
  height: auto;
  overflow: hidden;
  padding: 15px 10px;
  // 标题
  .controlPlan-title {
    font-size: 16px;
    font-weight: bold;
  }

  .controlPlan-condition {
    display: flex;

    .controlPlan-condition-form {
      flex: 3;
    }

    .controlPlan-condition-btn {
      flex: 1;
    }
  }

  // 核算报告表格
  .controlPlan-report {
    .controlPlan-history-title {
      font-size: 14px;
    }
  }
}
</style>
